import { useRef, forwardRef, ForwardedRef } from "react";

interface MyInputProps {
  // 这里定义 MyInput 组件的 props 类型，包括 ref 属性
}

const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref: ForwardedRef<HTMLInputElement>) => {
  return (
      <>
          <input type="text" ref={ref}></input>
          {props}
      </>
  );
});

export default function App() {
  const ref = useRef<HTMLInputElement | null>(null);
  const handleClick = () => {
    if (ref.current) {
      ref.current.style.background = 'skyblue';
    }
  };
  return (
    <>
      <h1>forwardRef</h1>
      <button onClick={handleClick}>Change Background</button>
      <MyInput ref={ref}></MyInput>
    </>
  );
}
